<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 一、什么是webpack:前端模块化打包工具 -->
    <!-- 二、webpack使用的环境配置 -->
    <!-- 1.安装node:因为node是webpack的依赖环境 -->
    <!-- 2.安装全局webpack：npm install webpack@3.6.0 -g -->

    <!-- npm:是模块管理和分发工具,是从国外服务器下载模块 -->
    <!-- cnpm:是模块管理和分发工具，cnpm是从国内服务器下载模块 -->

    <!-- 三、准备项目文件夹 -->
    <!-- dist:用于存放webpack打包之后的文件 -->
    <!-- src:用于存放写项目需要的静态资源 -->
    <!-- index.html:进入项目的默认首页 -->
    <!-- index.js:进入项目的入口文件 -->
    <!-- package.json:项目主要配置文件,使用npm init初始化项目，会自动生成该文件 -->

    <!-- 四、在index.html中引入index.js文件，会报错，因为js文件里面使用了commonJS规范和ES module规范的代码，
         浏览器无法识别这些代码，因此会报错；
         另外，真实项目中有许多js文件，如果一个个引入html文件中会非常麻烦，而且管理起来也不方便，代码不好维护，
         因此就需要使用webpack进行模块打包，把index.js打包成另一个浏览器可以识别的js文件，
         再通过script标签引入该js文件，就可以了
        -->

    <!-- 五、webpack打包 -->
    <!-- 1.命令行语句：webpack 入口文件地址  出口文件地址 -->
    <!-- 举例：webpack ./index.js  ./dist/test.js -->
    <!-- 含义：把index.js文件打包成test.js文件，然后放入到dist文件夹中 -->
    <!-- 2.把打包好的js文件引入到html文件中 -->

    <!-- 六、配置webpack的入口和出口 -->
    <!-- 1.新建文件：webpack.config.js文件，放入到项目的根目录中，文件名不能修改 -->
    <!-- 2.打包命令行：webpack -->
    <!-- 3.注意：每次修改完模块的代码，都必须再次打包 -->
    <!-- 4.所有模块都要打包的话，就必须模块之间相互依赖 -->
    <!-- 5.注意：一般打包的命令行不会使用webpack，而是使用npm run build,
        因为以后的项目中打包的时候，webpack.config.js文件不一定是这个名字，可以改成其他名字，
        那执行打包命令行的时候，就需要webpack+文件名，比较满帆，所以改用npm run build;
        但是npm run build 需要到package.json文件中配置才能使用
     -->

     <!-- 七、局部安装webpack -->
     <!-- 因为一个项目往往依赖特定的webpack版本，全局的版本可能很这个项目的webpack版本不一致，导出打包出现问题。
          所以通常一个项目，都有自己局部的webpack。 

          安装局部webpack: npm install webpack@3.6.0 --save-dev
          devDependencies:开发时依赖
          dependencies:运行时依赖

          注意：npm run build优先执行本地（当前项目中的）webpack脚本，只有本地没有webpack,
          才是使用全局的webpack进行打包，但是全局的webpack版本有可能和当前项目需要的webpack版本不匹配，
          因此才需要安装局部webpack.

        
    -->

    <!-- 八、loader -->
    <!-- 1.在之前的案例中，我们主要是用webpack来处理写的js文件，
         webpack可以直接处理js之间的相互依赖
        2.但是，在开发中，不仅有js文件，还有css、图片、TypeScript、sass、vue等文件需要转成js文件，
        对于webpack本身的能力来说，对于这些转化是不支持的。
        3.因此需要给webpack扩展相应的loader
        4.loader的使用过程：
        第一步：通过npm安装需要使用的loader
        第二步：在webpack.config.js中的modules关键字下进行配置
     -->

     <!-- 九、CSS文件处理 -->
     <!-- 1.删除旧版本的webpack:npm uninstall webpack-->
     <!-- 2. 安装webpack的最新版本:npm i webpack --save-dev-->
     <!-- 3. 安装css-loader:npm install --save-dev css-loader-->
     <!-- 4.安装style-loader:npm install --save-dev style-loader -->
     <!-- 5.在webpack.config.js里面配置loader,具体内容见官网 -->


     <!-- 补充：版本格式：  主版本号.次版本号.修订号 -->
     <!-- 主版本号：做了不兼容的API的修改 -->
     <!-- 次版本号：做了向下兼容的功能新增 -->
     <!-- 修订号：做了向下兼容的问题修正 -->
     <!-- 插入号（^）：作用于次版本号，比如^5.89.0，表示安装5.x.x的最新版本（不低于5.89.0），
          但是不高于6.x.x,也就是说安装的时候不改变主版本号 -->
     <!-- 波浪号（~）：作用于修订号，比如~5.89.0，表示安装5.89.x的最新版本（不低于5.89.0），
          但是不高于5.90.x,可就是说安装的时候不改变主版本号和次版本号
     -->

     <!-- 十、sass文件处理（less文件处理方式相同） -->
     <!-- 1.安装sass-loader：npm install sass-loader sass webpack --save-dev -->
     <!-- 2.在webpack.config.js里面配置loader,具体内容见官网 -->

     <!-- 十一、图片文件处理 -->
     <!-- 1.根据webpack版本不同，处理方式不同，最新版本的webpack（5.0以上），不需要配置loader,可以直接打包 -->
     <!-- 2.如果是低版本的webpack（5.0以下），需要使用url-loader模块 -->

     <!-- 十二、vue文件的处理 -->
     <!-- 1.在后续项目中，我们会使用vue.js进行开发，而且会以特殊的文件（xxx.vue）来阻止vue的组件 -->
     <!-- 2.现在在index.html中是无法直接写vue的代码，除非引入vue.js文件，但是这种方式不符合模块化开发，
          我们需要把vue.js当做一个模块来使用，就需要安装vue这个模块
          安装vue命令行：npm i vue --save:安装最新版的vue
          安装vue命令行：npm i vue@2.7.15 --save:安装指定版本的vue

          3.打包，报错（页面没有任何效果）
          原因：vue有不同版本的构建
          vue中有两类版本构建：
          （1）runtime-only:代码中，不可以有template
           (2)runtime-compiler:代码中，可以有template,因为compiler可以用于编译template
           
          在index.html中写的 <div id="app">{{message}}</div>就相当于template模版，
          而vue默认使用的是runtime-only版本的构建，因此无法解析代码，
          如果要解析代码，就必须使用runtime-compiler版本的构建，只需要在webpack.config.js里面配置如下代码：
            //   处理有关于路径相关的问题
    resolve:{
        // alias:别名
        alias:{
            "vue$":"vue/dist/vue.esm.js"
        }
    }

    -->


    <!-- 十三、处理App.vue文件 -->
    <!-- 1.安装vue-loader模块：npm i vue-loader --save-dev -->
    <!-- 2.安装vue-template-compiler模块：npm i vue-template-compiler --save-dev -->
    <!-- 3.配置webpack.config.js里面的loader 
          {
            test:/\.vue$/,
            use:["vue-loader"]
          }
    
    -->

    <!-- 十四、认识plugin(插件) -->
    <!-- 1.plugin是插件的意思，通常是用于对某个现有的架构进行扩展。
         webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等等。
 -->
    <!-- 2.loader和plugin的区别：
         loader：主要用于转换某些类型的模块，它是一个转换器
         plugin:它是webpack本身的扩展，是插件，是一个扩展器
    -->
    <!-- 3.plugin的使用步骤
        第一步：通过npm安装需要使用的plugin（某些webpack已经内置的插件就不需要单独安装）
        第二步：在webpack.config.js中的plugins属性中配置插件
    
    -->

    <!-- 十五、版权的plugin -->
    <!-- 1.该插件的名字叫做BannerPlugin, 该插件属于webpack自带的插件，就不需要单独安装-->
    <!-- 2.在webpack.config.js中的plugins属性中配置插件:
            new webpack.BannerPlugin("最终版权归属于xxxx所有!"),
    -->

    <!-- 十六、打包html的plugin(插件) -->
    <!--1.目前，我们的index.html文件是在项目的根目录下的，但是在真实的项目发布时，
    是要把dist文件夹里面的内容放到服务器上面，但是dist文件夹里面如果没有了index.html文件，
    那么打包的js等文件也就没有意义了。所以，需要将index.html文件，打包到dist文件夹中，
    这个时候就需要使用到htmlWebpackPlugin插件：
        2.htmlWebpackPlugin插件的功能：
           （1）自动生成一个index.html文件
           （2）将打包的js文件，自动通过script标签打入到body中
        3.htmlWebpackPlugin插件的使用步骤：
        第一步：安装插件：npm i html-webpack-plugin --save-dev
        第二步：在webpack.config.js中的plugins属性下面进行配置:
               new HtmlWebpackPlugin({
                   template:"./index.html" //以哪一个文件为模版进行打包
               })
        生成的index.html文件会自动到dist文件夹里面,
        注意：defer="defer":表示html代码执行完毕之后，再执行js文件

  -->
      <!-- 十七、搭建本地服务器 -->
      <!-- webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，
        可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。
        搭建本地服务器的优点：
        1.就不用在像之前一样，每次修改一些代码，都必须要重新打包，然后到浏览器里面手动刷新才能看到最新效果。
        2.这个本地服务器先把编译好的js，css,html等文件放在内存中，浏览器会直接读取内存中的代码，
        读取速度比放在磁盘中（dist文件夹里面的内容都是放在磁盘里面的）的速度快得多。
        写完所有代码之后，最后打包（npm run build），才会把所有打包好的文件放到磁盘中，
        然后就可以把dist文件夹里面的内容放到服务器上面了。
 -->
        <!-- 搭建本地服务器步骤：
             1.安装webpack-dev-server模块：npm i webpack-dev-server --save-dev
             2.在webpack.config.js中进行配置：
             devServer:{
                 static:'./dist',//提供本地服务的文件夹
                 port:3000,//端口号
                 open:true,//打开浏览器
                 hot:true//更新js代码后自动刷新
             }
             
             3.启动服务：webpack-dev-server,会报错,因为不是全局安装，找不到该模块
                        ./node_modules/.bin/webpack-dev-server，可以使用该命令行，一层层的去找到该模块启动服务，
                        但是非常麻烦，希望启动服务的命令行更加简单，就需要到package.json文件里面的scripts属性中进行配置：
                        "dev":"webpack-dev-server"

        -->


        <!-- 十八、webpack配置文件的分离 -->
        <!-- webpack.config.js文件中，配置了许多的内容，但是有些内容只是开发的时候需要，发布的时候不需要，
             打包的时候，就不要把开发需要的配置内容打包起来。
             比如：webpack-dev-server模块就只是在开发的时候需要，为了方便开发，derServer配置就只是在开发中需要，
             打包的时候不需要。
             比如：webpack.BannerPlugin版权所有插件在开发时不需要，在最后打包的时候需要。
             因此，就需要考虑配置文件的分离，把开发时需要和发布时需要的内容分开。
            -->
        <!-- 具体步骤如下：
            1.新建一个build文件夹，在文件夹中创建三个配置文件：
               （1）base.config.js:基础配置文件，就是所有公共需要的配置内容都在这个文件里面
               （2）dev.config.js:开发时配置文件，只需要开发时的内容
               （3）prod.config.js:生产时配置文件，只需要生产时的内容
            2.配置文件分离成功之后，在开发时需要运行：base+dev;在生产时需要运行：base+prod
            因此还需要组合配置文件，需要用到webpack-merge模块进行组合

            3.安装webpack-merge模块：npm i webpack-merge --save-dev
            注意：在配置文件中引入该模块的时候，只能这样写：
            let {merge}=require("webpack-merge");//用于组合配置文件
            merge是一个函数

            4.修改package.json文件里面的scripts属性：
               "build": "webpack --config ./build/prod.config.js",
               "dev": "webpack-dev-server --config ./build/dev.config.js"
        
        -->




</body>
</html>